<template>
	<view>
		<!-- 搜索栏 -->
		<u-search input-align="center" v-model="keyword"></u-search>
		<HM-filterDropdown class="filterDrop" :menuTop="75" :filterData="filterData" :defaultSelected="defaultSelected"
			:updateMenuName="true" @confirm="confirm" dataFormat="Object"></HM-filterDropdown>
		<!-- 筛选栏 
		<u-button @click="filterEable = !filterEable">筛选</u-button>
		<view class="filter" v-if="filterEable">
			<view style="flex: 1;">
				<u-button @click="genderShow = true">性别</u-button>
				<text>{{ genderValue.label || '未选择' }}</text>
				<u-picker :show="genderShow" :columns="genderList" keyName="label" @confirm="genderConfirm" @cancel="genderCancel"></u-picker>
			</view>
			
			<view style="flex: 1;">
				<u-button @click="priceShow = true">价格</u-button>
				<text>{{ priceValue.price ? `${priceValue.price.label} ${priceValue.order.label}` : '未选择' }}</text>
				<u-picker :show="priceShow" :columns="priceList" keyName="label" @confirm="priceConfirm" @cancel="priceCancel"></u-picker>
			</view>
		</view>-->

		<view class="" style="margin-top: 104rpx;">
			<scroll-view scroll-x>
				<view class="u-demo-block__content">
					<view class="u-page__tag-item" v-for="item in tagList[styleType]">
						<u-tag class="tag" :name="item" :text="item" shape="circle" @click="clickTag"></u-tag>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="tit">
			<!-- 小红书界面组件 -->
			<copyRedBook :list="showList"></copyRedBook>
		</view>
	</view>
</template>

<script>
	export default {
		created() {
			this.showList = this.list
		},
		onLoad(query) {
			this.styleType = query.type
			console.log(query);
			uni.setNavigationBarTitle({
				title: query.title
			})
		},
		data() {
			return {
				/* filterEable: false,
				genderShow: false,
				priceShow: false,
				genderList: [
					[{ id: 0, label: "女" },
					{ id: 1, label: "男" },]
				],
				priceList: [
					[{ id: 0, label: "0-100" },
					{ id: 1, label: "100-500" },
					{ id: 2, label: "500-1000" },
					{ id: 3, label: "1000-3000" },
					{ id: 4, label: "3000-6000" },
					{ id: 5, label: "6000以上" },],
					[{ id: 0, label: "升序" },
					{ id: 1, label: "降序" },]
				],
				genderValue: {},
				priceValue: {}, */
				tagList: [
					['白底', '红底', '蓝底', '黑白'],
					['日系', '浪漫', '简约', '中式', '闺蜜', '流行', '炫酷', '情侣', 'lomo'],

				],
				// 首页传来的类型
				styleType: 0,
				// 展示数据
				showList: [],
				keyword: "",
				filterData: [{
					"name": '筛选',
					"type": 'radio',
					"submenu": [{
							"name": "性别",
							"submenu": [{
									"name": "男",
									"value": "man"
								},
								{
									"name": "女",
									"value": "woman"
								}
							]
						},
						{
							"name": "价格",
							"submenu": [{
									"name": "0-100",
									"value": "0-100"
								},
								{
									"name": "100-500",
									"value": "100-500"
								},
								{
									"name": "500-1000",
									"value": "500-1000"
								},
								{
									"name": "1000-3000",
									"value": "1000-3000"
								},
								{
									"name": "6000以上",
									"value": "6000以上"
								}
							]
						},
						{
							"name": "价格排序",
							"submenu": [{
									"name": "升序",
									"value": "ASC"
								},
								{
									"name": "降序",
									"value": "DESC"
								}
							]
						},
						{
							"name": "热度优先",
							"submenu": [{
									"name": "是",
									"value": "HOT"
								},
								{
									"name": "否",
									"value": "DEFAULT"
								}
							]
						},
						{
							"name": "距离",
							"submenu": [{
								"name": "由近到远",
								"value": "distance"
							}]
						},
					]
				}],
				defaultSelected: [],
				// 作品集数据
				list: [{
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg',
					// 作品风格
					style: '日系'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg',
					// 作品风格
					style: '浪漫'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg',
					// 作品风格
					style: '日系'

				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg',
					// 作品风格
					style: '日系'

				}, ]
			}
		},
		methods: {
			/* genderCancel() {
				this.genderShow = false;
			},
			priceCancel() {
				this.priceShow = false;
			},
			genderConfirm({ indexs, value, values }) {
				console.log('genderConfirm', indexs, value, values)
				this.genderValue = value[0];
				this.genderShow = false
			},
			priceConfirm({ indexs, value, values }) {
				console.log('priceConfirm', indexs, value, values)
				this.priceValue = {
					price: value[0],
					order: value[1]
				};
				this.priceShow = false
			}, */
			confirm({
				index,
				value
			}) {
				console.log(index, value)
			},
			clickTag(index) {
				console.log(index);
				this.showList = this.list.filter((i) => {
					return i.style == index
				})
			}
		}
	}
</script>

<style lang="scss">
	.filterDrop {
		::v-deep .HMfilterDropdown {
			position: absolute !important;
		}
	}

	/* .filter {
	display: flex;
	
	text {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
} */
	.tit {
		margin-top: 4px;
		display: flex;
		flex-wrap: wrap;
	}

	.u-page__tag-item {
		margin-left: 30rpx;
		display: flex;

		&:first-child {
			margin-left: 15rpx;
		}
	}

	.u-demo-block__content {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;


	}
</style>